<template>
<el-card shadow="never" header="登录记录">
  <el-container >
    <el-header class="no-flex" height="auto">
      <el-form ref="formRef" inline :model="searchForm" label-width="70px">
        <el-form-item label="用户账号" class="inline">
          <el-input v-model="searchForm.title" placeholder="请输入用户账号" :clearable="true" style="width: 200px" />
        </el-form-item>
        <el-form-item label="ip地址" class="inline" >
          <el-input v-model="searchForm.operName" placeholder="请输入登陆ip地址" :clearable="true" style="width: 200px" />
        </el-form-item>
        <el-form-item label="ip归属地" class="inline" >
          <el-input v-model="searchForm.operName" placeholder="请输入登陆ip归属地" :clearable="true" style="width: 200px" />
        </el-form-item>
        <el-form-item label="操作时间" class="inline">
          <el-date-picker style="width: 200px"
                          type="datetimerange"
                          range-separator="-"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                          clearable
                          value-format="YYYY-MM-DD HH:mm:ss"
                          @change="handleChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search"  @click="upsearch">搜索</el-button>
          <el-button icon="el-icon-RefreshLeft" @click="reset">重置</el-button>
        </el-form-item>
        <el-form-item style="display: flex; margin-bottom: 0">
          <el-button type="danger" @click="del" icon="el-icon-delete" :disabled="ids.length === 0">删除</el-button>
          <el-button type="danger" @click="clean" icon="el-icon-refresh">清空</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main class="nopadding">
      <el-table @selection-change="handleSelectionChange" :selection="ids" :data="tableData" height="auto" border
                paginationLayout="total, prev, pager, next" hideDo>
        <el-table-column type="selection" align="center" />
        <el-table-column label="用户账号" prop="userName" align="center" />
        <el-table-column label="登陆IP" prop="ipaddr" width="100" />
        <el-table-column label="登陆地点" prop="loginLocation" align="center" />
        <el-table-column label="浏览器" prop="browser" align="center" />
        <el-table-column label="操作系统" prop="os" width="210" />
        <el-table-column label="提示消息" prop="msg" align="center" />
        <el-table-column label="访问时间" prop="loginTime" width="150" />
      </el-table>
    </el-main>
    <el-footer style="display: flex;justify-content: flex-end">
      <el-pagination
        v-model:current-page="searchForm.currentPage"
        v-model:page-size="searchForm.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-footer>
  </el-container>
</el-card>
</template>

<script>
export default {
  name: "conLog",
  data(){
    return{
      ids:[],//选中数组
      searchForm:{
        current:1,
        size:10,
        userName:'',//用户账号
        ipaddr:'',//登录IP地址
        loginLocation:'',//登录IP归属地
        beginTime:'',//操作时间范围开始
        endTime:'',//操作时间范围结束
      },  //表单数据
      total:0,
      tableData:[], //表格数据
    }
  },
  created() {
    this.getConLog()
  },
  methods:{
  async getConLog(){
      let {data} = await this.$API.auth.conLog.list.get({
        current: this.searchForm.current,
        size: this.searchForm.size,
        ipaddr: this.searchForm.ipaddr,
        loginLocation: this.searchForm.loginLocation,
        beginTime: this.searchForm.beginTime,
        endTime: this.searchForm.endTime
      })
    this.total = data.total
    this.tableData = data.records
    },
    // 时间选择
    handleChange(val){
      this.searchForm.beginTime= val[0]
      this.searchForm.endTime= val[1]
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
    },
    //搜索
    upsearch(){
      this.getConLog()
    },
    //重置
    reset(){
      this.$refs.formRef.resetFields();
      this.getConLog()
    },
    //清空
    clean(){
      this.$confirm('此操作将清空日志,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonClass: '取消',
        type: 'warning'
      }).then(async () => {
            await this.$API.auth.conLog.empty.get()
            this.$message({
              type: 'success',
              message: '清空成功'
            })
            this.getConLog()
      })
    },
    del(){
      this.$confirm('此操作将删除日志,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonClass: '取消',
        type: 'warning'
      }).then(async () => {
            await this.$API.auth.conLog.delete.post(this.ids)
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.getConLog()
      })
    },
    //切换分页
    handleCurrentChange(e){
      this.searchForm.current = e;
      this.getConLog()
    },
    // 改变单页显示数量
    handleSizeChange(e){
      this.searchForm.size = e
      this.getConLog()
    },
  }
}
</script>

<style scoped>

</style>
